<template>
  <el-dialog
    v-model="visible"
    title="客户档案"
    width="760px"
    top="8vh"
    class="customer-dialog"
    destroy-on-close
    @closed="emit('closed')"
  >
    <div class="header">
      <div class="avatar">{{ initials }}</div>
      <div class="meta">
        <div class="name">{{ model.customerName || '未命名客户' }}</div>
        <div class="sub">
          <el-tag v-if="model.customerSource" effect="light">{{ model.customerSource }}</el-tag>
          <span class="id">ID：{{ model.customerId ?? '-' }}</span>
        </div>
      </div>
      <div class="actions">
        <el-button round size="small" @click="copyPhone" :disabled="!model.customerPhone">
          <el-icon class="mr-4"><Phone /></el-icon>复制电话
        </el-button>
      </div>
    </div>

    <el-divider />

    <!-- Content -->
    <el-descriptions :column="2" border class="desc">
      <el-descriptions-item label="客户姓名">
        <el-icon class="mr-4"><User /></el-icon>{{ model.customerName || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="电话">
        <el-icon class="mr-4"><Phone /></el-icon>{{ model.customerPhone || '-' }}
      </el-descriptions-item>

      <el-descriptions-item label="客户来源">
        <el-icon class="mr-4"><Share /></el-icon>{{ model.customerSource || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="创建者">
        <el-icon class="mr-4"><Avatar /></el-icon>{{ model.createBy || '-' }}
      </el-descriptions-item>

      <el-descriptions-item label="客户地址" :span="2">
        <el-icon class="mr-4"><Location /></el-icon>{{ model.contactAddress || '-' }}
      </el-descriptions-item>

      <el-descriptions-item label="创建时间" :span="2">
        <el-icon class="mr-4"><Clock /></el-icon>{{ model.createTime || '-' }}
      </el-descriptions-item>

      <el-descriptions-item label="备注" :span="2">
        <el-empty v-if="!model.remark" description="暂无备注" :image-size="60" />
        <div v-else class="remark">{{ model.remark }}</div>
      </el-descriptions-item>
    </el-descriptions>

    <!-- Footer -->
    <template #footer>
      <div class="footer">
        <el-button @click="hide">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, computed, defineExpose, defineEmits } from 'vue';
import { User, Phone, Share, Avatar, Location, Clock } from '@element-plus/icons-vue';
import { useClipboard } from '../../hooks/useClipboard';

/** 客户数据结构 */
interface Customer {
  customerId?: string | number;
  customerName?: string;
  customerPhone?: string;
  customerSource?: string;
  contactAddress?: string;
  createBy?: string;
  createTime?: string;
  remark?: string;
}
const { copy } = useClipboard();

const emit = defineEmits(['closed']);

const visible = ref(false);
const model = reactive<Customer>({});

/** 公开方法：show(record) / hide() */
function show(record?: Partial<Customer>) {
  Object.keys(model).forEach((k) => delete (model as any)[k]);
  if (record) Object.assign(model, record);
  visible.value = true;
}
function hide() {
  visible.value = false;
}

defineExpose({ show, hide });

/** 头像字母/汉字缩写 */
const initials = computed(() => {
  const name = model.customerName?.trim();
  if (!name) return '客';
  // 中文取前2字，英文取首字母组合
  const isChinese = /[\u4e00-\u9fa5]/.test(name[0]);
  return isChinese
    ? name.slice(0, 2)
    : name
        .split(/\s+/)
        .map((s) => s[0])
        .join('')
        .slice(0, 2)
        .toUpperCase();
});

/** 复制电话 */
async function copyPhone() {
  if (model.customerPhone) copy(model.customerPhone);
}
</script>

<style scoped lang="scss">
.customer-dialog :deep(.el-dialog__body) {
  padding-top: 6px;
}

/* Header */
.header {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 2px 4px 0;
}
.avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  background: linear-gradient(135deg, #f6d365, #fda085);
  box-shadow: 0 8px 18px rgba(253, 160, 133, 0.35);
}
.meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.meta .name {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}
.meta .sub {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #909399;
  margin-top: 5px;
}
.meta .id {
  font-size: 13px;
}

.actions {
}

/* Content beautify */
.desc {
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
}
:deep(.el-descriptions__label) {
  color: #909399;
  background: #fafafa;
  font-weight: 500;
}
:deep(.el-descriptions__cell) {
  padding: 14px 16px !important;
}
.remark {
  white-space: pre-wrap;
  line-height: 1.6;
  background: #fff7ed;
  border: 1px dashed #ffd8b5;
  padding: 10px 12px;
  border-radius: 4px;
}

/* Footer */
.footer {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.mr-4 {
  margin-right: 4px;
}
</style>
